<div id="app">
    <img :src="imageUrl" alt="Image">
</div>
<head>
    <meta charset="utf-8">
    <title>回显</title>

</head>

<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/vue/vue.js"></script>
<script type="text/javascript" src="../js/vue/qs.js"></script>
<script type="text/javascript" src="../js/vue/axios.js"></script>

<script type="text/javascript">

    let vm = new Vue({
        el : "#app",
        data() {
            return {
                imageUrl : '',
                imageFile: null
            };
        },
        mounted() {
            let formData = new FormData();
            formData.append('account', 'oldChen');
            axios.post('/common/showImg', formData, { responseType: 'blob' }).then(response => {
                console.log(response.data);
                let blob = new Blob([response.data], { type: 'image/jpeg' });
                this.imageUrl = URL.createObjectURL(blob);
                console.log('上传成功');
            });
        },
        methods: {
            changeImg(){
                let that = this;
                //新建文件读取对象
                let reader = new FileReader();
                //读取上传的图片
                reader.readAsDataURL(document.getElementById("select").files[0]);
                //加载
                reader.onload = function (){
                    //将加载的值赋值给缩略图src
                    that.urls = this.result;
                }
            }
        }
    })

</script>